<!doctype html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<link href="css/mui.min.css" rel="stylesheet" />
		<script type="text/javascript" src="js/mui.min.js"></script>
		<style type="text/css">
			.clear:after{
				content: '';
				height: 0;
				display: block;
				clear: both;
			}
			/*body{
				background: white;
			}*/
			ul{
				list-style: none;
			}
			ul a{
				color: grey;
			}
			#header{
				background: #1d8fe1;
			}
			.mui-header a{
				color: white;
			}
			.mui-header h1{
				color: white;
			}
			.content {
				background: white;
				margin-top: 45px;
				height: 50px;
			
			}
			
			.one{
				z-index: 1000;
			}
			
			.one .two_li{
				padding: 15px 0;
				width: 33%;
				float: left;
			}
			
			.one .mui-navigate-right:after{
				content: '\e581';
				color: #000;
				position: relative;
				top: 5px;
				left: 10px;
			}
			ul .li:after{
				content: '\e580';
			}
			
			.list {
				background-color: #f5f5f5;
				/*margin-top: 20px;*/
				width: 100%;
				position: absolute;
				left: 0;
				display: none;
				/*z-index: 99999;*/
			}
			
			.second{
				padding: 10px;
				margin: 0;
			}
			
			.second li{
				background: white;
				margin: 3px 2px;
				display: inline-block;
				border: 1px solid gainsboro;
				line-height: 35px;
				text-align: center;
				height: 35px;
				padding:0 10px;
			}
			.mark{
				position: fixed;
				top: 96px;
				bottom: 0;
				left: 0;
				right: 0;
				width: 100%;
				height: 100%;
				z-index: 999;
				background-color: rgba(0,0,0,0.5);
				display: none;
			}
			
			.mui-media{
				padding: 15px;
			}
		</style>
	</head>
	<body>
		<header class="mui-bar mui-bar-nav mui-header" id="header">
			<div class="" id="mui_header">
				<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
				<h1 class="mui-title">招聘信息 </h1>
			</div>
		</header>
		
		<div class="content">
			<ul class="one clear">
				<li class="two_li">
					<a href="#" class="mui-navigate-right">行业</a>
					<div class="mark">
						<div class="list">
							<ul class="second">
								<li>全部</li>
								<li>电子商务</li>
			            		<li>游戏</li>
			            		<li>媒体</li>
			            		<li>在线教育</li>
			            		<li>数据服务</li>
			            		<li>生活服务</li>
			            		<li>广告营销</li>
			            		<li>数据服务</li>
			            		<li>生活服务</li>
			            		<li>广告营销</li>
							</ul>
						</div>
					</div>
				</li>
				<li class="two_li">
					<a href="#" class="mui-navigate-right">规模</a>
					<div class="mark">
						<div class="list">
							<ul class="second">
								<li>全部</li>
								<li>电子商务</li>
			            		<li>游戏</li>
			            		<li>媒体</li>
			            		<li>在线教育</li>
			            		<li>数据服务</li>
			            		<li>生活服务</li>
			            		<li>广告营销</li>
			            		<li>数据服务</li>
			            		<li>生活服务</li>
			            		<li>广告营销</li>
							</ul>
						</div>
					</div>
				</li>
				<li class="two_li">
					<a href="#" class="mui-navigate-right">要求</a>
					<div class="mark">
						<div class="list">
							<ul class="second">
								<li>全部</li>
								<li>电子商务</li>
			            		<li>游戏</li>
			            		<li>媒体</li>
			            		<li>在线教育</li>
			            		<li>数据服务</li>
			            		<li>生活服务</li>
			            		<li>广告营销</li>
			            		<li>数据服务</li>
			            		<li>生活服务</li>
			            		<li>广告营销</li>
							</ul>
						</div>
					</div>
				</li>
			</ul>
			<ul class="mui-table-view">
			    <li class="mui-table-view-cell mui-media">
			        <a href="javascript:;">
			            <img class="mui-media-object mui-pull-left" src="images/img1.jpg">
			            <div class="mui-media-body">
			                Web前端
			                <p class="mui-ellipsis">分秒科技 微融资</p>
			            </div>
			        </a>
			    </li>
			    <li class="mui-table-view-cell mui-media">
			        <a href="javascript:;">
			            <img class="mui-media-object mui-pull-left" src="images/img2.jpg">
			            <div class="mui-media-body">
			                Java开发
			                <p class="mui-ellipsis">阅绘玩科技 未融资</p>
			            </div>
			        </a>
			    </li>
			    <li class="mui-table-view-cell mui-media">
			        <a href="javascript:;">
			            <img class="mui-media-object mui-pull-left" src="images/img4.jpg">
			            <div class="mui-media-body">
			               	 前端技术员
			                <p class="mui-ellipsis">深圳热血科技 未融资</p>
			            </div>
			        </a>
			    </li><li class="mui-table-view-cell mui-media">
			        <a href="javascript:;">
			            <img class="mui-media-object mui-pull-left" src="images/img6.jpg">
			            <div class="mui-media-body">
			                前端技术员
			                <p class="mui-ellipsis">墨醇</p>
			                
			            </div>
			        </a>
			    </li>
			</ul>
		</div>
	</body>
	<script type="text/javascript">
		var a = document.getElementsByClassName('mui-navigate-right');
		var div = document.getElementsByClassName('list');
		var mark = document.getElementsByClassName('mark');
	
	for (var i = 0; i < a.length; i++) {
		(function (num) {
			a[num].onclick = function () {
				if (this.className == 'mui-navigate-right li') {
					this.className = 'mui-navigate-right';
					div[num].style.display = "none";
					mark[num].style.display = "none";
				} else {
					this.className = 'mui-navigate-right li';
					div[num].style.display = "block"; 
					mark[num].style.display = "block";
				}
				
			}
		}(i))
	}
	</script>

</html>